
<div class="mod-image image-manage">
  <loading ng-if="isLoading"></loading>
  <div class="detail-header">
    <button ui-sref="mirrorCustom" class="ui-btn ui-btn-lg ui-btn-imgtool"> <i class="icon-tool"></i>镜像定制工具</button>
  </div>
  <tabset class="mod-tab">
    <tab heading="基础镜像" active="tabActive[0].active" ui-sref="imageManage.baseimages">
      <div class="image-option">
        <button ng-if="!isShowAdd" ng-click="toggleShowAdd(true)" class="ui-btn ui-btn-bright ui-btn-sm">添加</button>
        <button ng-if="isShowAdd" ng-click="toggleShowAdd(false)" class="ui-btn ui-btn-bright ui-btn-sm">取消</button>
        <div class="pull-right">共{{baseImagesFiltered.length}}个镜像
          <input placeholder="输入镜像名称查找" ng-model="baseImageKey" class="ui-input-fill ui-input-search"/>
        </div>
      </div>
      <ul ng-form="ng-form" ng-class="{'need-valid':needValid.value}" name="imageForm" ng-show="isShowAdd" class="add-image">
        <li><span class="info-name">镜像名称</span>
          <input ng-model="newImageInfo.imageName" ng-pattern="/^[^\s]*$/" name="imageName" required="required" class="ui-input-info ui-input-white"/>
        </li>
        <li><span class="info-name">镜像版本</span>
          <input ng-model="newImageInfo.imageTag" is-tag-exist="is-tag-exist" baseimages="baseImages" imagename="newImageInfo.imageName" ng-pattern="/^[^\s]*$/" name="imageTag" required="required" class="ui-input-info ui-input-white"/><span ng-if="imageForm.imageTag.$error.isTagExist" class="tool-inline-error">已存在</span>
        </li>
        <li><span class="info-name">镜像所在仓库</span>
          <input ng-model="newImageInfo.registry" ng-pattern="/^[^\s]*$/" name="registry" required="required" class="ui-input-info ui-input-white"/>
        </li>
        <li><span class="info-name">镜像描述</span>
          <input ng-model="newImageInfo.description" name="description" class="ui-input-info ui-input-white"/>
          <button ng-disabled="isLoading" ng-click="needValid.value=true;imageForm.$valid&amp;&amp;createImage(imageForm);" class="ui-btn ui-btn-primary ui-btn-sm">添加镜像</button>
        </li>
      </ul>
      <table class="ui-table-dome">
        <thead>
          <tr>
            <th>镜像名称</th>
            <th>镜像版本</th>
            <th>仓库地址</th>
            <th>镜像描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="!baseImages||baseImagesFiltered.length===0">
            <td colspan="4">无相关镜像信息</td>
          </tr>
          <tr ng-repeat="img in baseImagesFiltered=(baseImages|filter:{'imageName':baseImageKey})">
            <td ng-bind="img.imageName"></td>
            <td ng-bind="img.imageTag"></td>
            <td ng-bind="img.registry"></td>
            <td ng-bind="img.description"></td>
            <td><a ng-click="deleteBaseImage(img.id)" class="icon-delete"></a></td>
          </tr>
        </tbody>
      </table>
    </tab>
    <tab heading="项目镜像" active="tabActive[1].active" ui-sref="imageManage.projectimages">
      <div class="image-option"><span class="registry-address">仓库地址：{{projectRegistry}}</span>
        <div class="pull-right">共{{projectImagesFiltered.length}}个镜像
          <input placeholder="输入镜像名称查找" ng-model="projectImageKey" class="ui-input-fill ui-input-search"/>
        </div>
      </div>
      <table class="ui-table-dome">
        <thead>
          <tr>
            <th>镜像名称</th>
            <th>镜像版本</th>
            <th>创建时间</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="!projectImages||projectImagesFiltered.length===0">
            <td colspan="3">无相关镜像信息</td>
          </tr>
          <tr ng-repeat="img in projectImagesFiltered=(projectImages|filter:{'imageName':projectImageKey})">
            <td ng-bind="img.imageName"></td>
            <td><a ng-click="openTagModal(img.imageName)" class="link-safe">查看</a></td>
            <td ng-bind="parseDate(img.createTime)"></td>
          </tr>
        </tbody>
      </table>
    </tab>
    <tab heading="非项目镜像" active="tabActive[2].active" ui-sref="imageManage.otherimages">
      <div class="image-option"><span class="registry-address">仓库地址：{{projectRegistry}}</span>
        <div class="pull-right">共{{otherImageFilterd.length}}个镜像
          <input placeholder="输入镜像名称查找" ng-model="otherImageKey" class="ui-input-fill ui-input-search"/>
        </div>
      </div>
      <table class="ui-table-dome">
        <thead>
          <tr>
            <th>镜像名称</th>
            <th>镜像版本</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-if="!otherImages||otherImageFilterd.length===0">
            <td colspan="2">无相关镜像信息</td>
          </tr>
          <tr ng-repeat="img in otherImageFilterd=(otherImages|filter:otherImageKey)">
            <td ng-bind="img"></td>
            <td><a ng-click="openTagModal(img)" class="link-safe">查看</a></td>
          </tr>
        </tbody>
      </table>
    </tab>
  </tabset>
</div>
<script type="text/ng-template" id="imageTagModal.html">
  <div ng-bind="imageName" class="d-modal-header"></div>
  <div class="d-modal-full">
    <loading ng-if="isLoading"></loading>
    <table class="ui-table-dome modal-full-table">
      <thead>
        <tr>
          <th>版本名</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-if="tagInfo.length===0">
          <td colspan="2">无版本信息</td>
        </tr>
        <tr ng-repeat="tag in tagInfo">
          <td ng-bind="tag.tag"></td>
          <td ng-bind="parseDate(tag.createTime)"></td>
        </tr>
      </tbody>
    </table>
  </div>
</script>